<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-permission="['Admin.Transpond.Update']" class="filter-item" type="primary" icon="el-icon-plus"
                 @click="handleUpdate()">添加主备分组
      </el-button>
      <el-button
        v-permission="['Admin.Transpond.Update']"
        :disabled="itemsChecked.length === 0"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        @click="deleteData()"
      >批量删除
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="tableLoading"
      :data="redundancies"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column label="分组名称" prop="name" min-width="190"></el-table-column>
      <el-table-column label="主网关" prop="size" align="center" min-width="190">
        <template slot-scope="{row}">
          <i v-if="row.usingActive" class="el-icon-success" style="color: #00b83f"></i>
          {{ row.activeLabel}}
          <el-tag v-if="row.activeStatus===0" size="mini" type="info">未知</el-tag>
          <el-tag v-if="row.activeStatus===1" size="mini" type="success">正常</el-tag>
          <el-tag v-if="row.activeStatus===2" size="mini" type="danger">故障</el-tag>
          <el-tag v-if="row.activeCStatus===0" size="mini" type="info">未知</el-tag>
          <el-tag v-if="row.activeCStatus===1" size="mini" type="success">已连接</el-tag>
          <el-tag v-if="row.activeCStatus===2" size="mini" type="danger">已断开</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备网关" prop="size" align="center" min-width="190">
        <template slot-scope="{row}">
          <i v-if="!row.usingActive" class="el-icon-success" style="color: #00b83f"></i>
          {{ row.stdbyLabel}}
          <el-tag v-if="row.standyStatus===0" size="mini" type="info">未知</el-tag>
          <el-tag v-if="row.standyStatus===1" size="mini" type="success">正常</el-tag>
          <el-tag v-if="row.standyStatus===2" size="mini" type="danger">故障</el-tag>
          <el-tag v-if="row.standbyCStatus===0" size="mini" type="info">未知</el-tag>
          <el-tag v-if="row.standbyCStatus===1" size="mini" type="success">已连接</el-tag>
          <el-tag v-if="row.standbyCStatus===2" size="mini" type="danger">已断开</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-permission="['Admin.Transpond.Update']" size="mini" type="primary" @click="handleUpdate(row.id)">
            编辑
          </el-button>
          <el-button v-permission="['Admin.Transpond.Update']" size="mini" type="danger" @click="deleteData(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
      -->
    </el-table>
    <edit-redundancy-drawer ref="editRedundancyDrawer" @save="getRedundancy"></edit-redundancy-drawer>
  </div>
</template>

<script>
  import {
    getRedundancy,
    deleteRedundancy
  } from "@/api/redundancy";
  import EditRedundancyDrawer from "./components/EditRedundancyDrawer";
  import _ from "lodash";

  export default {
    components: {
      'edit-redundancy-drawer': EditRedundancyDrawer
    },
    data() {
      return {
        isSubmitLoading: false,
        tableLoading: false,
        tableKey: 0,
        redundancies: [],
        itemsChecked: [],
        totalCount: 0
      };
    },
    computed: {},
    created() {
      this.getRedundancy();
    },
    methods: {
      getRedundancy() {
        this.tableLoading = true;
        getRedundancy().then(result => {
          this.redundancies = result;
          this.tableLoading = false;
        });
      },
      selectionChange(selection) {
        this.itemsChecked = selection;
      },
      deleteData(id) {
        let selectedIds = [];
        if (id) {
          selectedIds = [id];
        } else {
          selectedIds = this.itemsChecked.map(item => _.parseInt(item.id));
          if (selectedIds.length <= 0) {
            this.$message({ message: "至少选中一条记录", type: "warning" });
            return;
          }
        }

        this.$confirm("删除后不可恢复， 是否继续?", "确定执行删除操作吗？", {
          type: "warning"
        })
          .then(() => {
            deleteRedundancy(selectedIds).then(() => {
              this.getRedundancy();
              this.$message({ message: "删除成功", type: "success" });
            });
          })
          .catch(() => {
          });
      },
      handleUpdate(id) {
        this.$refs['editRedundancyDrawer'].show(id);
      }
    }
  };
</script>

<style lang="scss" scoped>
</style>
